<template>
    <div class="menu-inner">
      <div class="left-bar">
        <div class="left-bar-inner">
          <div  v-for="(item,i) in book_list_data.food_spu_tags" :class="[ 'left-item',current_left_index==i?'active':'']" @click="setCurrentLeftIndex(i)">
            <div class="item-text"><img class="item-icon" v-if="item.icon" :src="item.icon" /> {{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <p class="right-title">{{title}}</p>
        <div  class="right-list">
          <div class="right-list-inner">
            <detailItem :data="item" :index='index' v-for="(item,index) in rightConent"  ref="item_detail"></detailItem>
          </div>
        </div>

      </div>
      <ShopBar @changeData="changeData" />
    </div>
</template>

<script>
  import  MenuItem from "@/components/detail/MenuItem"
  import  ShopBar from "@/components/detail/ShopBar"
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
      }
    },
    computed: {
      ...mapState(['detail_tabs','book_list_data','current_left_index']),
      rightConent(){

        let index = this.current_left_index;
        let array=this.book_list_data.food_spu_tags||[];
        for (let i in  array[index]){

          for (let k in   array[index]['spus']){
            array[index]['spus'][k].chooseCount=array[index]['spus'][k].chooseCount?array[index]['spus'][k].chooseCount:0;
          }
        }
        let spus=(array[index]&&array[index].spus)||[];
        return spus

      },
      title(){
        return  this.rightConent.name
      }
    },
    components: {
      detailItem:MenuItem,
      ShopBar
    },
    methods:{
      setCurrentLeftIndex(i){
        this.$store.commit('setCurrentLeftIndex',i)
      },
      changeData(){
        for (let i=0;i<this.$refs.item_detail.length;i++){

          this.$refs.item_detail[i].viewrender()
        }

      }
    }
  }
</script>

<style lang="stylus">
  .menu-inner {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: (2.3rem);
    max-width:750px;
    margin-left auto;margin-right auto
    display: flex;
    overflow: hidden;
    .left-bar {
      width: 1.7rem;

      background-color: #efefef;
      overflow: auto;
      height: 100%;
      -webkit-overflow-scrolling: touch;

    }
    .left-bar-inner {
      padding-bottom: 1.7rem;
    }
    .left-item {
      font-size: (14px);
      color: #656565;
      text-align: center;
      height: (1.2rem);
      border-bottom: 1px solid #bfbfbf;
      display: flex;
      justify-content: center;
      &.active {
        background-color: #fff;
      }
    }
    .item-text {
      line-height: (0.4rem);
      align-self: center;
      text-align: center;
    }
    .item-icon {
      width: (0.4rem);
      height: (0.4rem);
      display: inline-block;
      vertical-align: (-0.08rem);
      margin-right: (0.12rem);
    }
    .right-list {
      height: 100%;
    }
    .right-list-inner {
      font-size: (16px);
      padding-bottom: (1.7rem);
    }
    .right-content {
      flex: 1;
      margin-left: (0.2rem);
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .right-title {
      font-size: (13px);
      color: #333;
      margin-top: (0.2rem);
      padding-left: (0.08rem);
      border-left: (2px) solid #ffd161;
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.7);
    }
  }
</style>
